<template>
  <div class="menu-container">
    <div class="menu" v-for="item in list" :key="item.id">
      <!-- 一级标题头 -->
      <div class="title">{{ item.title }}</div>
      <!-- 子节点 -->
      <div class="children">
        <div class="title" :class="{ active: child.id === activeMenuId }" @click="toMenuItemPageHandler(child)" v-for="child in item.children" :key="child.id">{{ child.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 激活的id
      activeMenuId: 11,
      list: [
        {
          id: 1,
          title: '账号管理',
          children: [
            { id: 11, title: '个人中心', link: '/personal/center' },
            { id: 12, title: '消息通知', link: '' },
            { id: 13, title: '账号信息', link: '' },
            { id: 14, title: '地址管理', link: '' },
            { id: 15, title: '账号安全', link: '' },
            { id: 16, title: '我的积分', link: '' },
            { id: 17, title: '我的收藏', link: '' },
            { id: 18, title: '我的足记', link: '' }
          ]
        },
        {
          id: 2,
          title: '交易管理',
          children: [
            { id: 21, title: '订单管理', link: '/order/list' },
            { id: 22, title: '津贴', link: '' },
            { id: 23, title: '回馈金', link: '' },
            { id: 24, title: '我的红包', link: '' },
            { id: 25, title: '礼品卡', link: '' }
          ]
        },
        {
          id: 3,
          title: '服务中心',
          children: [
            { id: 31, title: '售后记录', link: '' },
            { id: 32, title: '价格保护', link: '' },
            { id: 33, title: '帮助中心', link: '' }
          ]
        }
      ]
    }
  },

  methods: {
    /**
     * 跳转到对应的菜单页面
     * @param { Object } menu 菜单项
     */
    toMenuItemPageHandler (menu) {
      // 记住当前点击的id
      this.activeMenuId = menu.id
      // 如果当前没有配置链接，则不跳转
      if (!menu.link) {
        return
      }
      this.$router.push(menu.link)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.menu-container {
  padding: 10px 0px;
  .menu {
    margin-bottom: 40px;
    >.title {
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      margin: 16px 0px;
      padding-left: 26px;
    }
    .children {
      border-left: 2px solid @write;
      border-right: 2px solid @write;
      color: @font-color-six;
      display: block;
      font-size: 14px;
      padding-left: 40px;
      .title {
        cursor: pointer;
        margin: 16px 0px;
        transition: all 0.3s ease;
        &:hover {
          color: @font-color-golden;
        }
        &.active {
          color: @font-color-golden;
        }
      }
    }
    &:last-child {
      margin-bottom: 0px;
    }
  }
}
</style>
